{literal}
<style type="text/css">
    *html h2{font-size:20px;}

    div.zone_list{float:left;display:inline; width:162px; padding-left:5px;}

    #site_map_search{background:url(style/images201005/site-map-search-bg.gif) left top repeat-x; height:45px; padding:15px 0 0 20px;}

    .highlight { background-color: yellow; font-weight:bold; color:red; }

    #site_map .shopping{background:url(style/images201005/menu_sell.gif) no-repeat -7px -70px;padding-left:33px; height:29px;}

    #site_map .electric{background:url(style/images201005/menu_electric.gif) no-repeat -7px -70px;padding-left:30px; height:29px;}

    #site_map .fashion{background:url(style/images201005/menu_model.gif) no-repeat -7px -70px;padding-left:28px; height:29px;}

    #site_map .brands{background:url(style/images201005/menu_brands.gif) no-repeat -7px -70px;padding-left:32px; height:29px;}

    #site_map .estate{background:url(style/images201005/menu_estate.gif) no-repeat -7px -73px;padding-left:24px; height:29px;}

    #site_map .car{background:url(style/images201005/menu_car.gif) no-repeat -7px -73px;padding-left:38px; height:29px;}

    #searchCatWrapper{background:url(style/images201005/site-map-textbox.jpg) no-repeat left top; width:370px; float:left; display: inline; height:24px; padding:2px}

    #searchCat{ border:none; color: #6d6d6d; padding:5px 10px; width:282px; font: 12px Tahoma;}

    #searchCatButton{float:right; display:inline; cursor:pointer;height: 26px;margin-right: 3px;width: 63px;}

</style>
<script type="text/javascript">
    var highlightIndex = 0;
    var keyword = '';
    jQuery(document).ready(function(){
        jQuery(".filetree").treeview({
            animated: "fast"
        });

        jQuery(document).keypress(function(event){
            if(event.keyCode == "13")
            {
                HighLightSearch();
            }
        });

        jQuery('#searchCatButton').click(function(){
            HighLightSearch();
        });

        jQuery('#searchCat').blur(function(){
            if(!jQuery('#searchCat').val()||(jQuery('#searchCat').val()=='Nhập tên danh mục cần tìm..'))
            {
                jQuery('#searchCatWrapper').css({backgroundPosition:'top left'});
                jQuery('#searchCat').val('Nhập tên danh mục cần tìm..').css({background:'#f1f4fb',color:'#6d6d6d'});
            }
        });

        jQuery('#searchCat').hover(function(){
            jQuery('#searchCatWrapper').css({backgroundPosition:'0px -28px',color:'#000000'});
            jQuery('#searchCat').css({background:'#ffffff',color:'#000000'});
        },function(){
            if(!jQuery('#searchCat').val()||(jQuery('#searchCat').val()=='Nhập tên danh mục cần tìm..'))
            {
                jQuery('#searchCatWrapper').css({backgroundPosition:'top left'});
                jQuery('#searchCat').val('Nhập tên danh mục cần tìm..').css({background:'#f1f4fb',color:'#6d6d6d'});
            }
        });

        jQuery('#searchCat').click(function(){
            jQuery('#searchCat').val('').css({backgroundPosition:'0px -28px',color:'#000000'});
            jQuery('.zone_list').removeHighlight();
        });
    });


    function HighLightSearch()
    {
        var searchValue = jQuery('#searchCat').val();
        if(searchValue&&(searchValue!='Nhập tên danh mục cần tìm..'))
        {
            if(keyword != searchValue)
            {
                jQuery('.zone_list').removeHighlight().highlight(jQuery('#searchCat').val());
                keyword = searchValue;
                highlightIndex = 0;
            }

            var nextPos = jQuery('.highlight').slice(highlightIndex).position();
            if(nextPos)
            {
                jQuery(window).scrollTop(nextPos.top);
            }
            highlightIndex++;
        }
    }
</script>
{/literal}
<div id="site_map" style="float:left; display:inline; text-align: left; margin:2px 0 20px 0; width:100%;">
    <div id="site_map_search">
        <div style="font: bold 12px Tahoma ;color:#034b8a;float:left; display: inline; margin: 5px 5px 0 0;">Tìm kiếm</div>&nbsp;&nbsp;
        <div id="searchCatWrapper">
            <input id="searchCat" type="text" value="Nhập tên danh mục cần tìm..">
            <div id="searchCatButton"></div>
        </div>
        <div id="msg123"></div>
    </div>
    {foreach from=$site_map item=zone}
    <div class="zone_list" {if $zone.id == 3}style="width:135px;"{/if}>
        <h2 class="{$zone.class}"><a href="z{$zone.id}/{$zone.ebname}.html" title="{$zone.name}">{$zone.name}</a></h2>
        
            {if $zone.cats}
        <ul class="filetree">
                {foreach from=$zone.cats item=catlv1 name=Categories}
                    {if $zone.id == 3}
                        {if $catlv1.childs}
                            {foreach from=$catlv1.childs item=catlv2}
            <li>
                <span class="folder"><a href="{$catlv2.url}" title="{$catlv2.name}">{$catlv2.name}</a></span>
            </li>
                            {/foreach}
                        {/if}
                    {else}
            <li>
                <span class="folder"><a href="{$catlv1.url}" title="{$catlv1.name}">{$catlv1.name}</a></span>
                    {if $catlv1.childs}
                <ul>
                        {foreach from=$catlv1.childs item=catlv2 name=subCategories}
                    <li>
                        <span class="sub_folder"><a href="{$catlv2.url}" title="{$catlv2.name}">{$catlv2.name}</a></span>
                    </li>
                        {/foreach}
                </ul>
                    {/if}
            </li>
                    {/if}
                {/foreach}
        </ul>
            {/if}
    </div>
    {/foreach}
</div>